<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>

<div id="daapp">
    <el-dialog
            :visible.sync="dialogVisible"
            :fullscreen="false"
            :modal="false"
            :show-close="true"
            width="60%"
            center>
        <div id="mainxiao"
             style="width:100%; height:67vh;margin:0 auto;background-color:#fff;">
        </div>
    </el-dialog>
    <el-row>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue1" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate1">
                </el-date-picker>
                <div id="main" class="chart-container"
                     style="width:99%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue2" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate2">
                </el-date-picker>
                <div id="main1" class="chart-container"
                     style="width:99%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="nianvalue1"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate3">
                </el-date-picker>
                <el-select v-model="value1" size="small" placeholder="请选择" @change="changedate6">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main2" class="chart-container"
                     style="width:99%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue3" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate4">
                </el-date-picker>
                <el-select v-model="value2" size="small" placeholder="请选择" @change="changedate7">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main3" class="chart-container"
                     style="width:99%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="yuevalue1"
                        size="small"
                        type="month"
                        placeholder="选择月"
                        @change="changedate8">
                </el-date-picker>
                <el-select v-model="value3" size="small" placeholder="请选择" @change="changedate9">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="value4" size="small" placeholder="请选择" @change="changedate10" multiple
                           collapse-tags>
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main4" class="chart-container"
                     style="width:99%; height:67vh;margin:0 auto;background-color:#fff;transform: scale(1);">
                </div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;margin-bottom:20px;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="riqivalue1"
                        type="date"
                        placeholder="选择日期"
                        size="small"
                        @change="changedate11">
                </el-date-picker>
                <div id="main5" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        data() {
            return {
                dialogVisible: false,
                dateValue1: ["{{ start_date }}", "{{ end_date }}"],
                dateValue2: ["{{ start_date }}", "{{ end_date }}"],
                nianvalue1: "{{ year }}",
                dateValue3: ["{{ start_date }}", "{{ end_date }}"],
                yuevalue1: "{{ year }}-{{ month }}",
                riqivalue1: "{{ end_date }}",
                options: [{
                    value: 'mean',
                    label: '均值'
                }, {
                    value: 'sum',
                    label: '求和'
                }, {
                    value: 'std',
                    label: '标准差'
                }, {
                    value: 'var',
                    label: '方差'
                }, {
                    value: 'sem',
                    label: '均值标准误'
                }],
                value1: 'mean',
                value2: 'mean',
                options1: [{
                    value: 'chufacishu',
                    label: '触发次数'
                }, {
                    value: 'chufayonghushu',
                    label: '触发用户'
                }, {
                    value: 'shijianpingjun',
                    label: '平均使用时长'
                }],
                value3: 'chufacishu',
                options2: [],
                value4: [],
            }
        },
        mounted() {
            this.huoqushuju5();
            this.huoqushuju("{{ start_date }}", "{{ end_date }}");
            this.huoqushuju1("{{ start_date }}", "{{ end_date }}");
            this.huoqushuju2("{{ year }}", this.value1);
            this.huoqushuju3("{{ start_date }}", "{{ end_date }}", this.value2);
            this.huoqushuju4("{{ year }}", "{{ month }}", this.value3, this.value4);
            this.huoqushuju6("{{ end_date }}");
        },
        methods: {
            changedate1(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, changedate2(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju1(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, changedate3(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju2(new Date(data).getFullYear(), this.value1);
            }, changedate4(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju3(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '), this.value2);
            }, changedate6(value) {
                this.huoqushuju2(new Date(this.nianvalue1).getFullYear(), value);
            }, changedate7(value) {
                this.huoqushuju3(new Date(this.dateValue3[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(this.dateValue3[1]).toLocaleString().replace(/:\d{1,2}$/, ' '), value);
            }, changedate8(data) {
                if (this.value4.length >= 1) {
                    this.huoqushuju4(new Date(data).getFullYear(), (new Date(data).getMonth() + 1), this.value3, this.value4.toString());
                }
            }, changedate9(value) {
                if (this.value4.length >= 1) {
                    this.huoqushuju4(new Date(this.yuevalue1).getFullYear(), (new Date(this.yuevalue1).getMonth() + 1), value, this.value4.toString());
                }
            }, changedate10(value) {
                if (value.length >= 1) {
                    this.huoqushuju4(new Date(this.yuevalue1).getFullYear(), (new Date(this.yuevalue1).getMonth() + 1), this.value3, value.toString());
                }
            }, changedate11(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju6(new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, huoqushuju(dater1, dater2) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=bzhchriqishijianfenxi&start_date=" + dater1 + "&end_date=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '事件触发次数平均值差-日期段'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            dataZoom: [
                                {
                                    type: 'slider',
                                    show: true,
                                    yAxisIndex: [0],
                                    width: 12,
                                    showDataShadow: false,
                                    start: 0,
                                    end: 100 / (datat.data.shijianming.length / 20)
                                },
                                {
                                    type: 'inside',
                                    yAxisIndex: [0],
                                    start: 0,
                                    end: 100 / (datat.data.shijianming.length / 20),
                                    // zoomOnMouseWheel: false,// 不按任何功能键，鼠标滚轮能触发缩放
                                    // moveOnMouseWheel: true // 不按任何功能键，鼠标移动能触发数据窗口平移
                                }
                            ],
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom.requestFullScreen) { // HTML W3C 提议
                                                chartDom.requestFullScreen()
                                            } else if (chartDom.msRequestFullscreen) { // IE11
                                                chartDom.msRequestFullScreen()
                                            } else if (chartDom.webkitRequestFullScreen) { // Webkit
                                                chartDom.webkitRequestFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) { // Firefox
                                                chartDom.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            grid: {
                                top: 80,
                                bottom: 30
                            },
                            xAxis: {
                                type: 'value',
                                position: 'top',
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'category',
                                axisLine: {show: false},
                                axisLabel: {show: false},
                                axisTick: {show: false},
                                splitLine: {show: false},
                                data: datat.data.shijianming
                            },
                            series: [
                                {
                                    name: '平均值差',
                                    type: 'bar',
                                    stack: 'Total',
                                    label: {
                                        show: true,
                                        formatter: '{b}'
                                    },
                                    data: datat.data.chufacishu
                                }
                            ]
                        };
                        option && myChart.setOption(option, true);
                    }
                });
            }, huoqushuju1(dater1, dater2) {
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=dongtaiatshijianfenxi&start_date=" + dater1 + "&end_date=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            baseOption: {
                                timeline: {
                                    axisType: 'category',
                                    // realtime: false,
                                    // loop: false,
                                    autoPlay: true,
                                    // currentIndex: 2,
                                    playInterval: 1000,
                                    // controlStyle: {
                                    //     position: 'left'
                                    // },
                                    data: datat.data.riqi,
                                    label: {
                                        formatter: function (s) {
                                            return s
                                        }
                                    }
                                },
                                dataZoom: [
                                    {
                                        type: 'slider',
                                        show: true,
                                        yAxisIndex: [0],
                                        width: 12,
                                        showDataShadow: false,
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20)
                                    },
                                    {
                                        type: 'inside',
                                        yAxisIndex: [0],
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20),
                                    }
                                ],
                                toolbox: {
                                    right: 50,
                                    feature: {
                                        myFull: {
                                            show: true,
                                            title: '全屏',
                                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                            onclick: (e) => {
                                                // 全屏查看
                                                if (chartDom1.requestFullScreen) { // HTML W3C 提议
                                                    chartDom1.requestFullScreen()
                                                } else if (chartDom1.msRequestFullscreen) { // IE11
                                                    chartDom1.msRequestFullScreen()
                                                } else if (chartDom1.webkitRequestFullScreen) { // Webkit
                                                    chartDom1.webkitRequestFullScreen()
                                                } else if (chartDom1.mozRequestFullScreen) { // Firefox
                                                    chartDom1.mozRequestFullScreen()
                                                }
                                                // 退出全屏
                                                if (chartDom1.requestFullScreen) {
                                                    document.exitFullscreen()
                                                } else if (chartDom1.msRequestFullScreen) {
                                                    document.msExitFullscreen()
                                                } else if (chartDom1.webkitRequestFullScreen) {
                                                    document.webkitCancelFullScreen()
                                                } else if (chartDom1.mozRequestFullScreen) {
                                                    document.mozCancelFullScreen()
                                                }
                                                window.onresize = function () {
                                                    myChart1.resize()
                                                }
                                            }
                                        }
                                    }
                                },
                                tooltip: {},
                                legend: {
                                    left: 'center',
                                    data: ['触发次数', '触发用户', '平均时间'],
                                },
                                calculable: true,
                                grid: {
                                    top: 30,
                                    bottom: 80,
                                    left: 120,
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow',
                                            label: {
                                                show: true,
                                                formatter: function (params) {
                                                    return params.value.replace('\n', '');
                                                }
                                            }
                                        }
                                    }
                                },
                                yAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {interval: 0},
                                        data: datat.data.shijianming,
                                        splitLine: {show: false}
                                    }
                                ],
                                xAxis: [
                                    {
                                        type: 'value',
                                        name: '个数'
                                    }
                                ],
                                series: [
                                    {name: '触发次数', type: 'bar'},
                                    {name: '触发用户', type: 'bar'},
                                    {name: '平均时间', type: 'bar'},
                                ]
                            },
                            options: datat.data.shuju
                        };
                        option && myChart1.setOption(option, true);
                    }
                });
            }, huoqushuju2(dater1, value41) {
                var chartDom2 = document.getElementById('main2');
                var myChart2 = echarts.init(chartDom2);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=dongtaiayshijianfenxi&year=" + dater1 + "&shuming=" + value41,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            baseOption: {
                                timeline: {
                                    axisType: 'category',
                                    // realtime: false,
                                    // loop: false,
                                    autoPlay: true,
                                    // currentIndex: 2,
                                    playInterval: 1000,
                                    // controlStyle: {
                                    //     position: 'left'
                                    // },
                                    data: datat.data.riqi,
                                    label: {
                                        formatter: function (s) {
                                            return s
                                        }
                                    }
                                },
                                dataZoom: [
                                    {
                                        type: 'slider',
                                        show: true,
                                        yAxisIndex: [0],
                                        width: 12,
                                        showDataShadow: false,
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20)
                                    },
                                    {
                                        type: 'inside',
                                        yAxisIndex: [0],
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20),
                                    }
                                ],
                                toolbox: {
                                    right: 50,
                                    feature: {
                                        myFull: {
                                            show: true,
                                            title: '全屏',
                                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                            onclick: (e) => {
                                                // 全屏查看
                                                if (chartDom2.requestFullScreen) { // HTML W3C 提议
                                                    chartDom2.requestFullScreen()
                                                } else if (chartDom2.msRequestFullscreen) { // IE11
                                                    chartDom2.msRequestFullScreen()
                                                } else if (chartDom2.webkitRequestFullScreen) { // Webkit
                                                    chartDom2.webkitRequestFullScreen()
                                                } else if (chartDom2.mozRequestFullScreen) { // Firefox
                                                    chartDom2.mozRequestFullScreen()
                                                }
                                                // 退出全屏
                                                if (chartDom2.requestFullScreen) {
                                                    document.exitFullscreen()
                                                } else if (chartDom2.msRequestFullScreen) {
                                                    document.msExitFullscreen()
                                                } else if (chartDom2.webkitRequestFullScreen) {
                                                    document.webkitCancelFullScreen()
                                                } else if (chartDom2.mozRequestFullScreen) {
                                                    document.mozCancelFullScreen()
                                                }
                                                window.onresize = function () {
                                                    myChart2.resize()
                                                }
                                            }
                                        }
                                    }
                                },
                                tooltip: {},
                                legend: {
                                    left: 'center',
                                    data: ['触发次数', '触发用户', '平均时间'],
                                },
                                calculable: true,
                                grid: {
                                    top: 30,
                                    bottom: 80,
                                    left: 120,
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow',
                                            label: {
                                                show: true,
                                                formatter: function (params) {
                                                    return params.value.replace('\n', '');
                                                }
                                            }
                                        }
                                    }
                                },
                                yAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {interval: 0},
                                        data: datat.data.shijianming,
                                        splitLine: {show: false}
                                    }
                                ],
                                xAxis: [
                                    {
                                        type: 'value',
                                        name: '个数'
                                    }
                                ],
                                series: [
                                    {name: '触发次数', type: 'bar'},
                                    {name: '触发用户', type: 'bar'},
                                    {name: '平均时间', type: 'bar'},
                                ]
                            },
                            options: datat.data.shuju
                        };
                        option && myChart2.setOption(option, true);
                    }
                });
            }, huoqushuju3(dater1, dater2, value41) {
                var chartDom3 = document.getElementById('main3');
                var myChart3 = echarts.init(chartDom3);

                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=riqiduanatshijianfenxi&start_date=" + dater1 + "&end_date=" + dater2 + "&shuming=" + value41,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '事件分析-日期段'
                            },
                            dataZoom: [
                                {
                                    type: 'slider',
                                    show: true,
                                    yAxisIndex: [0],
                                    width: 12,
                                    showDataShadow: false,
                                    start: 0,
                                    end: 100 / (datat.data.shijianming.length / 20)
                                },
                                {
                                    type: 'inside',
                                    yAxisIndex: [0],
                                    start: 0,
                                    end: 100 / (datat.data.shijianming.length / 20),
                                }
                            ],
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom3.requestFullScreen) { // HTML W3C 提议
                                                chartDom3.requestFullScreen()
                                            } else if (chartDom3.msRequestFullscreen) { // IE11
                                                chartDom3.msRequestFullScreen()
                                            } else if (chartDom3.webkitRequestFullScreen) { // Webkit
                                                chartDom3.webkitRequestFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) { // Firefox
                                                chartDom3.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom3.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom3.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom3.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart3.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    // Use axis to trigger tooltip
                                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                                },
                            },
                            legend: {},
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                            },
                            yAxis: {
                                type: 'category',
                                data: datat.data.shijianming
                            },
                            series: [
                                {
                                    name: '触发次数',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true,
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: datat.data.chufacishu
                                },
                                {
                                    name: '触发用户',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: datat.data.chufayonghushu
                                },
                                {
                                    name: '平均时间',
                                    type: 'bar',
                                    stack: 'total',
                                    label: {
                                        show: true
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: datat.data.shijianpingjun
                                },
                            ]
                        };
                        option && myChart3.setOption(option, true);
                    }
                });
            }, huoqushuju4(dater1, dater2, value27, value26) {
                var chartDom4 = document.getElementById('main4');
                var myChart4 = echarts.init(chartDom4);
                var that = this;
                //console.log(cellSize, pieRadius)
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yueatshijianfenxi&year=" + dater1 + "&month=" + dater2 + "&leiming=" + value27 + "&shileiming=" + value26,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var cellSize = [100, 100];
                        var pieRadius = 45;
                        var option = {
                            tooltip: {},
                            calendar: {
                                top: 'middle',
                                left: 'center',
                                orient: 'vertical',
                                //cellSize: ['auto', 'auto'],
                                cellSize: cellSize,
                                yearLabel: {
                                    show: false,
                                    fontSize: 30
                                },
                                dayLabel: {
                                    margin: 20,
                                },
                                monthLabel: {
                                    show: false
                                },
                                range: [dater1 + '-' + dater2]
                            },
                            series: [
                                {
                                    id: 'label',
                                    type: 'scatter',
                                    coordinateSystem: 'calendar',
                                    symbolSize: 1,
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            return echarts.format.formatTime('dd', params.value[0]);
                                        },
                                        offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                                        fontSize: 14
                                    },
                                    data: datat.data.riqi
                                }
                            ]
                        };

                        function getPieSeries(scatterData, chart, Data) {
                            return scatterData.map(function (item, index) {
                                var center = chart.convertToPixel('calendar', item);
                                return {
                                    id: index + 'pie',
                                    type: 'pie',
                                    center: center,
                                    label: {
                                        formatter: '{c}',
                                        position: 'inside'
                                    },
                                    radius: pieRadius,
                                    //radius: '17%',
                                    data: Data[index].series
                                };
                            });
                        }

                        setTimeout(function () {
                            pieInitialized = true;
                            myChart4.setOption({
                                series: getPieSeries(datat.data.riqi, myChart4, datat.data.shuju)
                            });
                        }, 10);
                        option && myChart4.setOption(option, true);
                        myChart4.on('click', function (params) {
                            var arryid = '';
                            if (params.componentIndex === 0) {
                                arryid = params.dataIndex;
                            } else {
                                arryid = params.componentIndex - 1;
                            }
                            if (arryid !== '') {
                                //console.log(arryid)
                                //console.log(datat.data.shuju)
                                var valuell1 = "";
                                if (value27 === 'chufacishu') {
                                    valuell1 = "触发次数";
                                } else if (value27 === 'chufayonghushu') {
                                    valuell1 = "触发用户";
                                } else if (value27 === 'shijianpingjun') {
                                    valuell1 = "平均使用时长";
                                }
                                that.dialogVisible = true;
                                setTimeout(function () {
                                    var chartDomxiao = document.getElementById('mainxiao');
                                    var myChartxiao = echarts.init(chartDomxiao);
                                    var optionxiao = {
                                        title: {
                                            text: '事件分析  ' + datat.data.shuju[arryid].title.text,
                                            left: 'center'
                                        },
                                        toolbox: {
                                            right: 50,
                                            feature: {
                                                myFull: {
                                                    show: true,
                                                    title: '全屏',
                                                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                                    onclick: (e) => {
                                                        // 全屏查看
                                                        if (chartDomxiao.requestFullScreen) { // HTML W3C 提议
                                                            chartDomxiao.requestFullScreen()
                                                        } else if (chartDomxiao.msRequestFullscreen) { // IE11
                                                            chartDomxiao.msRequestFullScreen()
                                                        } else if (chartDomxiao.webkitRequestFullScreen) { // Webkit
                                                            chartDomxiao.webkitRequestFullScreen()
                                                        } else if (chartDomxiao.mozRequestFullScreen) { // Firefox
                                                            chartDomxiao.mozRequestFullScreen()
                                                        }
                                                        // 退出全屏
                                                        if (chartDomxiao.requestFullScreen) {
                                                            document.exitFullscreen()
                                                        } else if (chartDomxiao.msRequestFullScreen) {
                                                            document.msExitFullscreen()
                                                        } else if (chartDomxiao.webkitRequestFullScreen) {
                                                            document.webkitCancelFullScreen()
                                                        } else if (chartDomxiao.mozRequestFullScreen) {
                                                            document.mozCancelFullScreen()
                                                        }
                                                    }
                                                }
                                            }
                                        },
                                        tooltip: {
                                            trigger: 'item'
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 'left'
                                        },
                                        series: [
                                            {
                                                name: valuell1,
                                                type: 'pie',
                                                radius: '85%',
                                                data: datat.data.shuju[arryid].series,
                                                emphasis: {
                                                    itemStyle: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    };
                                    optionxiao && myChartxiao.setOption(optionxiao, true);
                                    window.onresize = function () {
                                        myChartxiao.resize()
                                    }
                                }, 100);
                            }
                        });

                    }
                });
            }, huoqushuju5() {
                var that = this;
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=shijianming",//这里是url
                    dataType: 'json',
                    async: false,
                    success: function (datat, heads, status) {
                        that.options2 = datat.data;
                        var arte = new Array();
                        for (var ity = 0; (ity < datat.data.length && ity < 3); ity++) {
                            arte[ity] = datat.data[ity].label;
                        }
                        that.value4 = arte;
                    }
                })
            }, huoqushuju6(dater1) {
                var chartDom5 = document.getElementById('main5');
                var myChart5 = echarts.init(chartDom5);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=dongtaiaxshshijianfenxi&riqi=" + dater1,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            baseOption: {
                                timeline: {
                                    axisType: 'category',
                                    autoPlay: true,
                                    playInterval: 1000,
                                    data: datat.data.riqi,
                                    label: {
                                        formatter: function (s) {
                                            return s
                                        }
                                    }
                                },
                                dataZoom: [
                                    {
                                        type: 'slider',
                                        show: true,
                                        yAxisIndex: [0],
                                        width: 12,
                                        showDataShadow: false,
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20)
                                    },
                                    {
                                        type: 'inside',
                                        yAxisIndex: [0],
                                        start: 0,
                                        end: 100 / (datat.data.shijianming.length / 20),
                                    }
                                ],
                                toolbox: {
                                    right: 50,
                                    feature: {
                                        myFull: {
                                            show: true,
                                            title: '全屏',
                                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                            onclick: (e) => {
                                                // 全屏查看
                                                if (chartDom5.requestFullScreen) { // HTML W3C 提议
                                                    chartDom5.requestFullScreen()
                                                } else if (chartDom5.msRequestFullscreen) { // IE11
                                                    chartDom5.msRequestFullScreen()
                                                } else if (chartDom5.webkitRequestFullScreen) { // Webkit
                                                    chartDom5.webkitRequestFullScreen()
                                                } else if (chartDom5.mozRequestFullScreen) { // Firefox
                                                    chartDom5.mozRequestFullScreen()
                                                }
                                                // 退出全屏
                                                if (chartDom5.requestFullScreen) {
                                                    document.exitFullscreen()
                                                } else if (chartDom5.msRequestFullScreen) {
                                                    document.msExitFullscreen()
                                                } else if (chartDom5.webkitRequestFullScreen) {
                                                    document.webkitCancelFullScreen()
                                                } else if (chartDom5.mozRequestFullScreen) {
                                                    document.mozCancelFullScreen()
                                                }
                                                window.onresize = function () {
                                                    myChart5.resize()
                                                }
                                            }
                                        }
                                    }
                                },
                                tooltip: {},
                                legend: {
                                    left: 'center',
                                    data: ['触发次数', '触发用户', '平均时间'],
                                },
                                calculable: true,
                                grid: {
                                    top: 30,
                                    bottom: 80,
                                    left: 120,
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow',
                                            label: {
                                                show: true,
                                                formatter: function (params) {
                                                    return params.value.replace('\n', '');
                                                }
                                            }
                                        }
                                    }
                                },
                                yAxis: [
                                    {
                                        type: 'category',
                                        axisLabel: {interval: 0},
                                        data: datat.data.shijianming,
                                        splitLine: {show: false}
                                    }
                                ],
                                xAxis: [
                                    {
                                        type: 'value',
                                        name: '个数'
                                    }
                                ],
                                series: [
                                    {name: '触发次数', type: 'bar'},
                                    {name: '触发用户', type: 'bar'},
                                    {name: '平均时间', type: 'bar'},
                                ]
                            },
                            options: datat.data.shuju
                        };
                        option && myChart5.setOption(option, true);
                    }
                });
            },
        }
    }).$mount('#daapp')
</script>
</body>
</html>